@import "~colors.scss";

$size: 20px;
$border-rad: 5px;
$border-second: 1px solid $second-color;
$tooltip-bg-color: #1a1a1a;
$tooltip-width: 300px;
.modal-container {
    width: 13 * $size;
    height: 15.5 * $size;
    border-radius: $border-rad;
    border: $border-second;
    background-color: $color-background;
    .modal-header {
        display: flex;
        justify-content: flex-end;
        .modal-close-button {
            height: 2 * $size;
            width: 2 * $size;
            overflow: hidden;
            cursor: pointer;
            padding: 0;
            border-top-right-radius: $border-rad;
            border-left: $border-second;
            border-bottom: $border-second;
            span {
                display: block;
                width: 100%;
                height: 100%;
                background-color: $cancel-color;
                background-image: url("~images/close.svg");
                background-repeat: no-repeat;
                background-size: $size;
                background-position: $size / 2 $size / 2;
                transition: transform 0.3s;
            }
            span:hover {
                transform: scale(1.3);
                transition: transform 0.2s;
            }
        }
        .modal-close-button:hover {
            background-size: $size * 1.5;
            background-position: $size / 4 $size / 4;
            transition: background-size 0.2s, background-position 0.2s;
        }
    }
    .modal-body {
        display: flex;
        justify-content: center;
    }
}
.manual-confirmation {
    width: 9 * $size;
    height: 10 * $size;
    //background-color: #2bff5a;
    .confirm-main {
        position: relative;
        background-color: $color-background;
        width: 100%;
        height: 8 * $size;
        .block-wrapper {
            width: 5 * $size;
            height: 5 * $size;
            position: absolute;
            border: 1px solid $new-color-1;
            background-color: $unknown-color;
            overflow: hidden;
            top: 1 * $size;
            right: 2 *$size;
            .moving-block {
                width: 100%;
                height: 100%;
                position: absolute;
                right: 100%;
                transform-origin: right bottom;
            }
            .animation-block {
                width: 100%;
                height: 100%;
                position: absolute;
                background-color: transparent;
                transform-origin: right bottom;
                .icon {
                    width: 100%;
                    height: 100%;
                    background-repeat: no-repeat;
                    background-size: 2.5 * $size;
                    background-position: (2.5 / 2) * $size;
                }
            }
            .animation-block.failure .icon {
                background-image: url("~images/cross2.svg");
            }
            .animation-block.success .icon {
                background-image: url("~images/circle.svg");
            }
            .animation-block.pending {
                display: flex;
                justify-content: center;
                align-items: center;
                .row {
                    display: flex;
                    justify-content: space-between;
                    width: 60px;
                }
            }
            .moving-block.done {
                background-color: $done-color-light;
            }
            .moving-block.fail {
                background-color: $fail-color-light;
            }
        }
        .moving-gear {
            width: 2 * $size;
            height: 2 *$size;
            position: absolute;
            bottom: 1 * $size;
            left: 1 * $size;
            background-image: url("~images/gear-4.svg");
            background-repeat: no-repeat;
        }
    }
    .controls {
        display: flex;
        justify-content: space-between;
        button {
            text-overflow: ellipsis;
            position: relative;
            width: 3.5 * $size;
            height: 3.5 * $size;
            background-repeat: no-repeat;
            background-size: 1.5 * $size;
            background-position: $size;
        }
        button.win {
            background-color: $done-color-light;
            background-image: url("~images/circle.svg");
        }
        button.fail {
            background-color: $fail-color-light;
            background-image: url("~images/cross2.svg");
        }
    }
}


// tooltip //
.tooltip {
    display: flex;
    opacity: 0;
    position: absolute;
    width: $tooltip-width;
    height: 100%;
    top: 0;
    z-index: 1;
    .text {
        flex-grow: 1;
        background-color: $tooltip-bg-color;
        color: wheat;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .arrow {
        transform-origin: left;
        display: flex;
        align-items: center;
        div {
            width: 0;
            height: 0;
            border-bottom: (3.5 * $size)/2 solid transparent;
            border-top: (3.5 * $size)/2 solid transparent;
        }
    }
}
*:hover > .tooltip {
    transition: opacity .4s;
    opacity: 1;
}
.tooltip.left {
    left: -($tooltip-width + 5);
    flex-flow: row;
}
.tooltip .arrow .right {
    border-left: (3.5 * $size)/2 solid $tooltip-bg-color;
}
.tooltip.right {
    flex-flow: row-reverse;
    right: -($tooltip-width + 5);
}
.tooltip .arrow .left {
    border-right: (3.5 * $size)/2 solid $tooltip-bg-color;
}

// chain transition classes //
.moving-block {
    &.anime-rot-1 {
        transition: transform .6s linear;
        transform: rotate(45deg);
    }
    &.anime-rot-2 {
        transition: transform 1.2s ease-out;
        transform: rotate(75deg);
    }
    &.anime-rot-3 {
        transition: transform 0.1s ease;
        transform: rotate(90deg);
    }
    &.anime-rot-end {
        transform: rotate(90deg);
    }
    &.anime-rot-back {
        transition: transform .2s ease-in;
        transform: rotate(0deg);
    }
}

.moving-gear {
    &.anime-rot-1 {
        transition: transform .6s linear;
        transform: rotate(90deg);
    }
    &.anime-rot-2 {
        transition: transform 1.2s ease-out;
        transform: rotate(150deg);
    }
    &.anime-rot-3 {
        transition: transform 0.1s ease;
        transform: rotate(180deg);
    }
    &.anime-rot-end {
        transform: rotate(180deg);
    }
    &.anime-rot-back {
        transition: transform .2s ease-in;
        transform: rotate(0deg);
    }
}

// animation classes
.animation-block.pending {
    transition: opacity 0.2s;
    .dot {
        width: 8px;
        height: 8px;
        background-color: yellow;
        border-radius: 4px;
        animation-name: pulse;
        animation-duration: 0.6s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-direction: alternate-reverse;
    }
    .dot.n1 {
        animation-delay: 0s;
    }
    .dot.n2 {
        animation-delay: 0.2s;
    }
    .dot.n3 {
        animation-delay: 0.4s;
    }
}
.animation-block.success .icon, .animation-block.failure .icon {
    animation-name: icon-blur;
    animation-duration: .6s;
}
@keyframes icon-blur {
    from {
        opacity: 0;
        filter: blur(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes pulse {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.7)
    }
}